<template>
  <div class="info-machine-physical-root info-root">
    <div class="info-title">
      <span style="font-size: 16px">{{ (currentMachine.hostName + '').toUpperCase() }}</span>
    </div>
    <div class="info-content">
      <el-descriptions class="qa-gw-desc" :column="2">

        <el-descriptions-item label="操作系统:">
          {{ physicalInfo.systemName }}
        </el-descriptions-item>
        <el-descriptions-item label="系统架构:">
          {{ physicalInfo.systemArchitecture }}
        </el-descriptions-item>

        <el-descriptions-item label="CPU核数:">
          {{ physicalInfo.systemAvailableProcessors }} Core
        </el-descriptions-item>
        <el-descriptions-item label="内存大小:">
          {{ (physicalInfo.totalPhysicalMemorySize / 1024).toFixed(0) + ' MB' }}
        </el-descriptions-item>

        <el-descriptions-item label="JVM名称:">
          {{ physicalInfo.vnName }}
        </el-descriptions-item>
        <el-descriptions-item label="JDK版本:">
          {{ physicalInfo.javaVersion }}
        </el-descriptions-item>

        <el-descriptions-item label="JavaHome:">
          {{ physicalInfo.javaHome }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject } from "vue";
import { getPhysicalApi } from "@/api/guardcat";

// -------------------- inject
const currentMachine: any = inject('currentMachine')

const physicalInfo = ref({
  systemName: "",
  systemArchitecture: "",
  systemAvailableProcessors: 0,
  totalPhysicalMemorySize: 0,
  vnName: "",
  javaVersion: "",
  javaHome: "",
})

const getPhysical = () => {
  getPhysicalApi({ machineId: currentMachine.value.machineId }).then(resp => {
    physicalInfo.value = resp.data;
  })
}

const reload = () => {
  getPhysical();
}

defineExpose({
  reload
})
</script>

<style scoped lang="scss">
.info-machine-physical-root {
  @include box(100%, 100%);
}
</style>